<template>
  <div class="roleListd" style="overflow: hidden;">
    <div class="inputjs" style="margin-bottom: 20px;">
      <span>角色名称*:</span>
      <el-input v-model="input" placeholder="请输入角色名称" />
    </div>
    <div class="inputqx">
      <span>添加权限*:</span>
      <div class="doubleSelected">
        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="city in cities" :key="city" :label="city">{{
            city
          }}</el-checkbox>
        </el-checkbox-group>
        <hr>
        <el-checkbox v-model="checkAll1" :indeterminate="isIndeterminate1"
          @change="handleCheckAllChange1">会员管理</el-checkbox>
        <el-checkbox-group v-model="checkedCities1" @change="handleCheckedCitiesChange1">
          <el-checkbox v-for="city in cities1" :key="city" :label="city">{{
            city
          }}</el-checkbox>
        </el-checkbox-group>
        <hr>
        <el-checkbox v-model="checkAll2" :indeterminate="isIndeterminate2"
          @change="handleCheckAllChange2">优惠券</el-checkbox>
        <el-checkbox-group v-model="checkedCities2" @change="handleCheckedCitiesChange2">
          <el-checkbox v-for="city in cities2" :key="city" :label="city">{{
            city
          }}</el-checkbox>
        </el-checkbox-group>
        <hr>
        <el-checkbox v-model="checkAll3" :indeterminate="isIndeterminate3"
          @change="handleCheckAllChange3">商品</el-checkbox>
        <el-checkbox-group v-model="checkedCities3" @change="handleCheckedCitiesChange3">
          <el-checkbox v-for="city in cities3" :key="city" :label="city">{{
            city
          }}</el-checkbox>
        </el-checkbox-group>
        <hr>

        <el-checkbox v-model="checkAll4" :indeterminate="isIndeterminate4"
          @change="handleCheckAllChange4">订单管理</el-checkbox>
        <el-checkbox-group v-model="checkedCities4" @change="handleCheckedCitiesChange4">
          <el-checkbox v-for="city in cities4" :key="city" :label="city">{{
            city
          }}</el-checkbox>
        </el-checkbox-group>
        <hr>
        <el-checkbox v-model="checkAll5" :indeterminate="isIndeterminate5"
          @change="handleCheckAllChange5">客房管理</el-checkbox>
        <el-checkbox-group v-model="checkedCities5" @change="handleCheckedCitiesChange5">
          <el-checkbox v-for="city in cities5" :key="city" :label="city">{{
            city
          }}</el-checkbox>
        </el-checkbox-group>
        <hr>
        <el-checkbox v-model="checkAll6" :indeterminate="isIndeterminate6"
          @change="handleCheckAllChange6">投诉建议</el-checkbox>
        <el-checkbox-group v-model="checkedCities6" @change="handleCheckedCitiesChange6">
          <el-checkbox v-for="city in cities6" :key="city" :label="city">{{
            city
          }}</el-checkbox>
        </el-checkbox-group>
        <hr>
        <el-checkbox v-model="checkAll7" :indeterminate="isIndeterminate7"
          @change="handleCheckAllChange7">设置</el-checkbox>
        <el-checkbox-group v-model="checkedCities7" @change="handleCheckedCitiesChange7">
          <el-checkbox v-for="city in cities7" :key="city" :label="city">{{
            city
          }}</el-checkbox>
        </el-checkbox-group>
        <hr>
        <el-checkbox v-model="checkAll8" :indeterminate="isIndeterminate8"
          @change="handleCheckAllChange8">用户管理</el-checkbox>
        <el-checkbox-group v-model="checkedCities8" @change="handleCheckedCitiesChange8">
          <el-checkbox v-for="city in cities8" :key="city" :label="city">{{
            city
          }}</el-checkbox>
        </el-checkbox-group>
        <div class="butn">
          <el-button type="primary" round>保存</el-button>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref } from 'vue'

const checkAll = ref(false)
const isIndeterminate = ref(true)
const checkedCities = ref([''])
const cities = null

const handleCheckAllChange = (val) => {
  checkedCities.value = val ? cities : []
  isIndeterminate.value = false
}
const handleCheckedCitiesChange = (value) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === cities.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}



const checkAll1 = ref(false)
const isIndeterminate1 = ref(true)
const checkedCities1 = ref(['会员信息查看'])
const cities1 = ['会员信息查看', '会员信息修改', '会员积分', '修改会员充值']

const handleCheckAllChange1 = (val) => {
  checkedCities1.value = val ? cities1 : []
  isIndeterminate1.value = false
}
const handleCheckedCitiesChange1 = (value) => {
  const checkedCount1 = value.length
  checkAll1.value = checkedCount1 === cities1.length
  isIndeterminate1.value = checkedCount > 0 && checkedCount < cities1.length
}


const checkAll2 = ref(false)
const isIndeterminate2 = ref(true)
const checkedCities2 = ref(['优惠券发放'])
const cities2 = ['优惠券信息查看', '优惠券信息修改', '优惠券发放', '修改会员充值', '充值设置', '积分设置', '充值记录', '消费记录']

const handleCheckAllChange2 = (val) => {
  checkedCities.value = val ? cities : []
  isIndeterminate.value = false
}
const handleCheckedCitiesChange2 = (value) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === cities.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}



const checkAll3 = ref(false)
const isIndeterminate3 = ref(true)
const checkedCities3 = ref(['优惠券发放'])
const cities3 = ['商品信息查看', '商品信息修改', '商品分类信息修改']

const handleCheckAllChange3 = (val) => {
  checkedCities.value = val ? cities : []
  isIndeterminate.value = false
}
const handleCheckedCitiesChange3 = (value) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === cities.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}



const checkAll4 = ref(false)
const isIndeterminate4 = ref(true)
const checkedCities4 = ref(['商品信息处理'])
const cities4 = ['商品订单查看', '商品信息处理', '客房订单查看', '客房订单处理', '住宿记录查看']

const handleCheckAllChange4 = (val) => {
  checkedCities.value = val ? cities : []
  isIndeterminate.value = false
}
const handleCheckedCitiesChange4 = (value) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === cities.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}




const checkAll5 = ref(false)
const isIndeterminate5 = ref(true)
const checkedCities5 = ref(['房态修改'])
const cities5 = ['房态查看', '房态修改', '房型修改', '房号查看']

const handleCheckAllChange5 = (val) => {
  checkedCities.value = val ? cities : []
  isIndeterminate.value = false
}
const handleCheckedCitiesChange5 = (value) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === cities.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}




const checkAll6 = ref(false)
const isIndeterminate6 = ref(true)
const checkedCities6 = ref(['投诉建议处理'])
const cities6 = ['投诉建议查看', '投诉建议处理']

const handleCheckAllChange6 = (val) => {
  checkedCities.value = val ? cities : []
  isIndeterminate.value = false
}
const handleCheckedCitiesChange6 = (value) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === cities.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}




const checkAll7 = ref(false)
const isIndeterminate7 = ref(true)
const checkedCities7 = ref(['微信设置'])
const cities7 = ['微信设置', '酒店设置', '其他设置']

const handleCheckAllChange7 = (val) => {
  checkedCities.value = val ? cities : []
  isIndeterminate.value = false
}
const handleCheckedCitiesChange7 = (value) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === cities.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}



const checkAll8 = ref(false)
const isIndeterminate8 = ref(true)
const checkedCities8 = ref([''])
const cities8 = ['用户查看', '用户修改', '角色查看', '角色修改']

const handleCheckAllChange8 = (val) => {
  checkedCities.value = val ? cities : []
  isIndeterminate.value = false
}
const handleCheckedCitiesChange8 = (value) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === cities.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}
</script>

<style lang="scss" scoped>
$--el-color-primary: #C9DAFF;

.roleListd {
  width: calc(100% - 60px);
  background-color: #FFF;
  padding:30px;

  .inputjs {
    width: 279px;
    height: 20px;
    display: flex;

    span {
      width: 120px;
    }
  }

  .doubleSelected {
    span {
      width: 120px;
    }

    // background-color: yellowgreen;
    width:-webkit-calc(100% - 85px);
    float: right;
  }
}

.butn {
  float: right;
  margin-right: 100px
}
</style>